マイクロインタラクション Micro Interaction
単一のシナリオに基づいてひとつの作業だけをこなす最小単位の相互作用 Interactionのこと
マイクロインタラクションとマクロインタラクション
table:micro-interaction
マイクロインタラクション マクロインタラクション (フィーチャー)
規模 🐜 🐘
作用する範囲 🐜 🐘
複雑性 🐜 🐘
所要時間 🐜 🐘
必要な集中力 🐜 🐘
例 ボリューム調節 音楽プレーヤー
用途
単一タスクの処理
機器同時の接続
単一データの取得
株価、気温
現在進行中のプロセスの制御
テレビのチャンネル
特定の設定や変更
小さなコンテンツの表示や生成
ステータスメッセージ
特定機能のon/off オン・オフ
役割
競争の激しい市場において
UXの向上→ブランド ロイヤリティ向上
マルチプラットフォームにおける接着剤
世界観、ブランドの一貫性向上
タスクのマイクロ化と現代人の生活との親和
例
特にあてもなくTwitterを見て、いいねする
構造
トリガー→ルール→フィードバック→ループとモード
トリガー
開始
手動トリガー
コントロール
マイクロインタラクションを開始させる能力
進行中であることを視覚的に示すシグニファイア Signifierを含む
画面を触ると、iPhone上にスワイプして開く
システムトリガー
ルール
動作のルール
例
Error エラーメッセージの表現
「このアカウントは、別の機器で使われているため使用できません。複数の機器で用いたい場合、プレミアムアカウントかファミリーアカウントをご使用ください。」
フィードバック
ルールをユーザーに明示
ユーザーの機器やアプリのルール理解を助ける
大事な前提:全てのインタラクションや表現は、ユーザーを助けるためのメタファー
ループとモード
メタルール
ループ
例
もう一度購入する
購入した商品を購入する場合、デフォルト表記から変更
手法
マイクロインタラクション1つ1つを磨く
拘れる要素を見つけ出し、磨く
細部を徹底的に拘ると、比類のない記憶に残る瞬間を生み出せる
メリット
それ自体が独自の特徴、ブランド、一貫性に
例 iPodのスクロールホイール
難しさ
適用範囲を定める
1つのマイクロインタラクションを中心に作り上げる
実用最小限の製品
例 Instagram
多数のマイクロインタラクションをまとめ上げる
相互に関連付けられたマイクロインタラクションの集合とみなす
動画
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るためのズルいCC活用テクニック(Adobe MAX JAPAN 2018発表資料)
コーディング系
ライブラリ
Lottie
airbnb design
👶コードあり グッドパッチ記事
個人的
デザインとしては好きだが、実際自分が実装する際、イライラするので、自分はむいてないかも?
CSSの微調整はつらみ
ユーザーの真の課題を解決するわけではないので、モチベ上がりにくい。優先度が低い
余裕のある大企業出ないと厳しい
デザイナーが実装しやすい方法を自分で回しとく
時間、コストを兼ねた選択肢の用意
例
デザイナーがBodymovinで作成し、エンジニアがLottieComponent コンポーネント codeを用意
参考
マイクロインタラクション ―UI/UXデザインの神が宿る細部